<template>
  <div class="interface-debug">
    <el-row>
      <el-col :span="16">
        <h3 class="interface-title">接口信息</h3>
        <div>
          <el-form label-width="120px">
            <el-row>
              <el-col :span="10">
                <el-form-item label="接口编号：">
                  <span>{{ interfaceForm.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="接口名称：">
                  <span>{{ interfaceForm.name }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="接口状态：">
                  <el-tag v-if="interfaceForm.status === 0" type="warning" size="small">未完成</el-tag>
                  <el-tag v-if="interfaceForm.status === 1" type="success" size="small">已完成</el-tag>
                  <el-tag v-if="interfaceForm.status === 2" size="small">已废弃</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="接口路径：">
                  <el-tag v-if="interfaceForm.method === 'GET'" size="small">GET</el-tag>
                  <el-tag v-if="interfaceForm.method === 'POST'" type="success" size="small">POST</el-tag>
                  <el-tag v-if="interfaceForm.method === 'PUT'" type="danger" size="small">PUT</el-tag>
                  <el-tag v-if="interfaceForm.method === 'DELETE'" type="warning" size="small">DELETE</el-tag>
                  <span>{{ interfaceForm.path }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="接口描述：">
                  <span>{{ interfaceForm.description }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <h3 class="interface-title">环境</h3>
        <div>
          <el-form label-width="120px">
            <el-form-item label="调试环境：">
              <el-select v-model="environment" placeholder="请选择调试环境">
                <el-option label="开发环境" value="0"></el-option>
                <el-option label="测试环境" value="1"></el-option>
                <el-option label="生产环境" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <h3 class="interface-title">Request</h3>
        <el-tabs type="border-card">
          <el-tab-pane label="请求参数">
            <div>
              <el-button style="margin-bottom: 5px" type="primary" size="small" icon="el-icon-plus" @click="addNewParams()">添加</el-button>
              <el-row :gutter="2" v-for="(item, index) in interfaceForm.params" :key="index">
                <el-col :span="5">
                  <el-input v-model="item.name" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="item.must" placeholder="请选择">
                    <el-option label="必填" value="必填"></el-option>
                    <el-option label="非必填" value="非必填"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="item.remark" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="7">
                  <el-input v-model="item.value" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-button type="danger" size="small" circle icon="el-icon-delete" @click="interfaceForm.params.splice(index,1)" style="margin-left: 3px"></el-button>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="请求Headers">请求Headers</el-tab-pane>
          <el-tab-pane label="请求Cookies">请求Cookies</el-tab-pane>
        </el-tabs>

      </el-col>
      <el-col :span="8">
        <h3 class="interface-title">Response</h3>
      </el-col>
    </el-row>

    <!--提交按钮-->
    <div style="text-align: center;margin-top: 30px;position: fixed;bottom:0;width:60%;padding-bottom: 15px">
      <el-row>
        <el-button type="primary" icon="el-icon-document-checked" :loading="loading" size="small" @click="saveInterfaceInfo(interfaceForm)">调试</el-button>
        <router-link :to="{  name:'接口列表'}">
          <el-button type="warning" icon="el-icon-back" size="small">返回</el-button>
        </router-link>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "interfaceDebug",
  data() {
    return {
      interfaceForm: {
        id: 1,
        name: '获取验证码',
        status: 1,
        method: 'GET',
        path: '/user/v1/genVerifyCode',
        description: '获取短信验证码接口',
        params: []
      },
      environment: {}
    }
  },

  methods: {
    addNewParams() {
      this.interfaceForm.params.push({
        name: '',
        must: '',
        remark: '',
        value: ''
      })
    }
  }
}
</script>

<style scoped>
.interface-title {
  clear: both;
  font-weight: 600;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}
</style>
